<template>
  <div class="app-container">
    <div class="search-bar">
      <!--多条件查询表单-->
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="井号">
          <el-input
            v-model="searchData.plan_wellname"
            clearable
            placeholder="请输入井号"
            style="width: 130px"
          />
        </el-form-item>

<!--        <el-form-item label="作业区">-->
<!--          <el-select-->
<!--            v-model="searchData.plan_areano"-->
<!--            clearable-->
<!--            filterable-->
<!--            placeholder="请选择作业区"-->
<!--            style="width: 130px"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="(item, i) in opeArea"-->
<!--              :key="i"-->
<!--              :label="item"-->
<!--              :value="item"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchData.startTime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchData.endTime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
          >查询</el-button>
          <el-button type="default" @click="reset()">清空</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">
      <el-table
        :data="tableData"
        border
        height="700"
        style="width: 100%">
      >
        <el-table-column
          prop="plan_COMPLETEDATE"
          label="日期"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="plan_CARNO"
          label="车号"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="plan_WELLNAME"
          label="井号"
          header-align="center"
          align="center"
        />
        <el-table-column label="设计参数" header-align="center">
          <el-table-column
            prop="cycledes_AMOUNTOFLIQUID"
            label="总液量"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_PRELOAD"
            label="前置液量"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_PRELOADLOWLIMIT"
            label="前置液温度下限"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_PRELOADUPPERLIMIT"
            label="前置液温度上限"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_HOTWASHLOAD"
            label="热洗液量"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_HOTWASHLOWLIMIT"
            label="热洗液温度下限"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_HOTWASHUPPERLIMIT"
            label="热洗液温度上限"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_REPLACELOAD"
            label="顶替液量"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_REPLACELOADLOWLIMIT"
            label="顶替液温度下限"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="cycledes_REPLACELOADUPPERLIMIT"
            label="顶替液温度上限"
            header-align="center"
            align="center"
          />
        </el-table-column>
        <el-table-column label="实际数据" align="center">
          <el-table-column
            prop="plan_WORKCONSUME"
            label="工作时间"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="plan_WORKSTATE"
            label="工作阶段"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="plan_AVERAGEINJECTLIQUID"
            label="注入液量"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="plan_AVERAGEINJECTTEMP"
            label="注入温度"
            header-align="center"
            align="center"
          />
        </el-table-column>
      </el-table>
      <Pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @changePage="getListPage1(arguments)"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 20,
      total: 0,
      searchData: {},
      // opeArea: ['一作业区', '二作业区','三作业区','五作业区','七作业区','八作业区','九作业区','运维一中心']

    }
  },
  created() {
    this.getListPage(this.page, this.limit, this.searchData)
  },
  methods: {
    getListPage(pageNum, pageSize, data) {
      this.$http.post('/tPlanHotwash/pageQuery2', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //页码变动
    getListPage1(msg){
      let pageNum=msg[0]
      let pageSize=msg[1]
      let data=this.searchData
      this.$http.post('/tPlanHotwash/pageQuery2', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    //每页记录数变动
    handleSizeChange(size){
      let pageSize=this.page
      let pageNum=size
      let data=this.searchData
      this.$http.post('/tPlanHotwash/pageQuery2', { pageSize, pageNum, data }).then(({ data: { data: res }}) => {
        this.tableData = res.records
        this.total = res.total
      })
    },
    search() {
      this.getListPage(this.page, this.limit, this.searchData)
    },
    reset() {
      this.searchData = {}
    },
  }
}
</script>

<style scoped>

</style>
